<template>
  <div id="popup-Video" class="ol-popup-Video">
    <a href="#" id="popup-closer-Video" class="ol-popup-closer-Video"></a>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="摄像头" width="180" />
      <el-table-column prop="name" :label="labelName" width="180" />
    </el-table>
    <img src="@/assets/image/video.png" alt="" />
  </div>
</template>

<script setup>
import { Query } from '@/hook/mapgis-api/Query'
import { createDraw } from '@/hook/ol-api/createDraw'
import { getCurrentInstance, onMounted, ref } from 'vue'
import { useCommonStore } from '@/stores/common'
import { storeToRefs } from 'pinia'
const store = useCommonStore()
const {isShowVideo} = storeToRefs(store)
const labelName = ref('')
const tableData = ref([
  {
    date: '位置',
    name: ''
  }
])

const { proxy } = getCurrentInstance()
/* 图层设置 */
let source = new ol.source.Vector({})
let Videodraw = createDraw({
  type: 'Point',
  source,
  success: handleVideo
})
onMounted(() => {
    let $map = proxy.$map
    $map.addInteraction(Videodraw)
})

function handleVideo(feature) {
  let position = feature.getGeometry().getCoordinates()
  let service = {
    name: import.meta.env.VITE_DOC_NAME,
    /* 图层id */
    layerId: 3
  }
  Query.queryByPnt({
    position,
    service,
    success: (feature) => {
      let $map = proxy.$map
      var container = document.getElementById('popup-Video')
      var popupcloser = document.getElementById('popup-closer-Video')
      const popup = new ol.Overlay({
        //要转换成overlay的HTML元素
        element: container,
        //当前窗口可见
        autoPan: true,
        //Popup放置的位置
        positioning: 'bottom-center',
        //是否应该停止事件传播到地图窗口
        stopEvent: true,
        autoPanAnimation: {
          //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
          duration: 250
        }
      })
      $map.addOverlay(popup)
      if (feature) {
        container.style.display = 'block'
        // 设置弹窗位置
        let position = feature[0].getGeometry().flatCoordinates
        
        popup.setPosition(position)

        // 设置弹窗内容
        tableData.value[0].name = feature[0].getProperties().values_.位置
        labelName.value = feature[0].getProperties().values_.编号
        // 移除画笔
        $map.removeInteraction(Videodraw)
        // 移除popup
        popupcloser.addEventListener('click', function () {
            container.style.display = 'none'
            isShowVideo.value = false
        })
      }
    }
  })
}
</script>

<style scoped>
.ol-popup-Video {
 display: none;
  box-sizing: border-box;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100px;
  z-index: 100;
}

.ol-popup-Video:after,
.ol-popup-Video:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup-Video:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup-Video:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  transform: translateX(-50%);
}
img {
  width: 300px;
  height: 200px;
  margin: 10px 30px;
}
.ol-popup-closer-Video {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
  z-index:10;
}

.ol-popup-closer-Video:after {
  content: '✖';
}
</style>
